<template>
  <div>
    <el-form ref="evaluationForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="评价类型" prop="evaluationType">
        <el-select v-model="form.evaluationType" placeholder="请选择评价类型">
          <el-option label="季度评价" value="季度评价" />
          <el-option label="年度评价" value="年度评价" />
          <el-option label="订单评价" value="订单评价" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="评价周期" prop="evaluationPeriod">
        <el-input v-model="form.evaluationPeriod" placeholder="请输入评价周期，如: 2023Q1" />
      </el-form-item>
      
      <el-form-item label="质量评分" prop="qualityScore">
        <el-rate
          v-model="form.qualityScore"
          show-score
          text-color="#ff9900"
          score-template="{value}"
          :max="10"
          :allow-half="true"
        />
      </el-form-item>
      
      <el-form-item label="交付评分" prop="deliveryScore">
        <el-rate
          v-model="form.deliveryScore"
          show-score
          text-color="#ff9900"
          score-template="{value}"
          :max="10"
          :allow-half="true"
        />
      </el-form-item>
      
      <el-form-item label="价格评分" prop="priceScore">
        <el-rate
          v-model="form.priceScore"
          show-score
          text-color="#ff9900"
          score-template="{value}"
          :max="10"
          :allow-half="true"
        />
      </el-form-item>
      
      <el-form-item label="服务评分" prop="serviceScore">
        <el-rate
          v-model="form.serviceScore"
          show-score
          text-color="#ff9900"
          score-template="{value}"
          :max="10"
          :allow-half="true"
        />
      </el-form-item>
      
      <el-form-item label="评价人" prop="evaluator">
        <el-input v-model="form.evaluator" placeholder="请输入评价人" />
      </el-form-item>
      
      <el-form-item label="评价备注" prop="remark">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入评价备注" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "EvaluationForm",
  props: {
    supplierId: {
      type: Number,
      required: true
    },
    evaluation: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        supplierId: this.supplierId,
        evaluationType: '',
        evaluationPeriod: '',
        qualityScore: 5.0,
        deliveryScore: 5.0,
        priceScore: 5.0,
        serviceScore: 5.0,
        evaluator: '',
        remark: ''
      },
      rules: {
        evaluationType: [
          { required: true, message: '请选择评价类型', trigger: 'change' }
        ],
        evaluationPeriod: [
          { required: true, message: '请输入评价周期', trigger: 'blur' }
        ],
        qualityScore: [
          { required: true, message: '请评定质量评分', trigger: 'change' }
        ],
        deliveryScore: [
          { required: true, message: '请评定交付评分', trigger: 'change' }
        ],
        priceScore: [
          { required: true, message: '请评定价格评分', trigger: 'change' }
        ],
        serviceScore: [
          { required: true, message: '请评定服务评分', trigger: 'change' }
        ],
        evaluator: [
          { required: true, message: '请输入评价人', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    evaluation: {
      handler(val) {
        if (val && Object.keys(val).length > 0) {
          this.form = { ...val };
        }
      },
      immediate: true,
      deep: true
    },
    supplierId: {
      handler(val) {
        this.form.supplierId = val;
      },
      immediate: true
    }
  },
  methods: {
    // 重置表单
    resetForm() {
      this.$refs.evaluationForm.resetFields();
      this.form = {
        supplierId: this.supplierId,
        evaluationType: '',
        evaluationPeriod: '',
        qualityScore: 5.0,
        deliveryScore: 5.0,
        priceScore: 5.0,
        serviceScore: 5.0,
        evaluator: '',
        remark: ''
      };
    },
    // 获取表单数据
    getFormData() {
      return this.form;
    },
    // 验证表单
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.evaluationForm.validate(valid => {
          if (valid) {
            resolve(this.form);
          } else {
            reject('表单验证失败');
          }
        });
      });
    }
  }
}
</script>

<style scoped>
.el-rate {
  margin-top: 8px;
}
</style> 